// 响应式断点
@mixin responsive($breakpoint) {
    @if $breakpoint =='md' {
        @media (max-width: 768px) {
            @content;
        }
    }

    @if $breakpoint =='xl' {
        @media (max-width: 1200px) {
            @content;
        }
    }
}

// 弹性布局
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $wrap;
}

// 弹性布局居中
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 弹性布局两端对齐
@mixin flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

// 弹性布局垂直居中
@mixin flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// 文本溢出省略
@mixin text-ellipsis($lines: 1) {
    @if $lines ==1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @else {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

// 滚动条样式
@mixin scrollbar {
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background: $border-color;
        border-radius: 4px;
    }
}

// 清除浮动
@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

// 绝对定位
@mixin absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

// 固定定位
@mixin fixed($top: auto, $right: auto, $bottom: auto, $left: auto) {
    position: fixed;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

// 过渡动画
@mixin transition($properties: all, $duration: $transition-normal, $timing: $easing-ease) {
    transition: $properties $duration $timing;
}

// 阴影
@mixin shadow($level: 'md') {
    @if $level =='sm' {
        box-shadow: $shadow-sm;
    }

    @else if $level =='md' {
        box-shadow: $shadow-md;
    }

    @else if $level =='lg' {
        box-shadow: $shadow-lg;
    }

    @else if $level =='xl' {
        box-shadow: $shadow-xl;
    }
}

// 按钮基础样式
@mixin button-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-sm $spacing-md;
    border-radius: $border-radius-md;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    line-height: $line-height-normal;
    cursor: pointer;
    @include transition;
}

// 输入框基础样式
@mixin input-base {
    width: 100%;
    padding: $spacing-sm $spacing-md;
    border: 1px solid $border-color;
    border-radius: $border-radius-md;
    font-size: $font-size-sm;
    line-height: $line-height-normal;
    color: $text-primary;
    background-color: $background-primary;
    @include transition;

    &:hover {
        border-color: $border-color-hover;
    }

    &:focus {
        border-color: $border-color-active;
        outline: none;
        box-shadow: $shadow-focus;
    }

    &::placeholder {
        color: $text-tertiary;
    }
}

// 禁用状态
@mixin disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

// 渐变背景
@mixin gradient($direction: to right, $start-color: $primary-color, $end-color: $primary-hover) {
    background: linear-gradient($direction, $start-color, $end-color);
}

// 毛玻璃效果
@mixin glass($blur: 10px, $opacity: 0.8) {
    background: rgba(255, 255, 255, $opacity);
    backdrop-filter: blur($blur);
    -webkit-backdrop-filter: blur($blur);
}

// 动画
@mixin keyframes($name) {
    @keyframes #{$name} {
        @content;
    }
}

// 动画应用
@mixin animation($name, $duration: $transition-normal, $timing: $easing-ease, $delay: 0s, $iteration: 1, $direction: normal, $fill: forwards) {
    animation: $name $duration $timing $delay $iteration $direction $fill;
}